<template>
<div>
    <h2>商家菜单管理</h2>
    <p>请选择一个商家以查看和管理其菜单</p>
    <el-select v-model="selectedMerchant" placeholder="选择商家" @change="fetchMenu" class="merchant-select">
    <el-option
        v-for="merchant in merchants"
        :key="merchant.merchant_ID"
        :label="merchant.merchant_name"
        :value="merchant.merchant_ID"
    />
    </el-select>
    <el-table v-if="menu.length" :data="menu" class="menu-table" style="width: 100%">
    <el-table-column prop="dish_name" label="菜名" />
    <el-table-column prop="dish_category" label="分类" />
    <el-table-column prop="price" label="价格" />
    <el-table-column prop="description" label="描述" />
    <el-table-column prop="ingredient" label="成分" />
    <el-table-column prop="nutritionInfo" label="营养信息" />
    <el-table-column prop="allergen" label="过敏原" />
    <el-table-column label="操作">
        <template #default="scope">
        <el-button type="danger" @click="deleteDish(scope.row.dish_ID)">删除</el-button>
        </template>
    </el-table-column>
    </el-table>
</div>
</template>

<script setup>
import { ElMessage } from 'element-plus';
import axios from '@/axios';
import { ref, onMounted } from 'vue';

const merchants = ref([]);
const selectedMerchant = ref(null);
const menu = ref([]);

const fetchMerchants = async () => {
try {
    const response = await axios.get('/api/admin/GetMerchantList');
    merchants.value = response.data;
} catch (error) {
    ElMessage.error('获取商家列表失败');
}
};

const fetchMenu = async (merchantID) => {
try {
    const response = await axios.get(`/api/merchant/GetMenu/${merchantID}`);
    menu.value = response.data;
} catch (error) {
    ElMessage.error('获取菜单失败');
}
};

const deleteDish = async (dishID) => {
if (!selectedMerchant.value) {
    ElMessage.error('请先选择商家');
    return;
}
try {
    await axios.post('/api/merchant/deleteDish', {
    merchant_ID: selectedMerchant.value,
    dish_ID: dishID
    });
    menu.value = menu.value.filter(dish => dish.dish_ID !== dishID);
    ElMessage.success('删除成功');
} catch (error) {
    ElMessage.error('删除失败');
}
};

onMounted(() => {
fetchMerchants();
});
</script>

<style scoped>

h2 {
text-align: center;
margin-bottom: 10px;
color: #333;
}

p {
text-align: center;
color: #666;
margin-bottom: 20px;
}

.merchant-select {
margin-bottom: 20px;
width: 100%;
}

.menu-table {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.no-data {
text-align: center;
color: #999;
margin-top: 20px;
}

.el-select, .el-table {
width: 100%;
}

.el-table-column {
text-align: center;
}

.el-button {
margin: 0 5px;
}
</style>
  